Skip to main content

Twig

{# Wrapper with two columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

<div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-6/12 md:justify-start md:text-left text-center">
something 1
</div>

<div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-6/12 flex md:justify-end justify-center md:items-center">
something 2
</div>

</div>


{# Wrapper with two columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

<div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-6/12 md:justify-start md:text-left text-center">
something 1
</div>

<div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-6/12 flex md:justify-end justify-center md:items-center">
something 2
</div>

</div>

{# Wrapper with three columns next to each other on desktop. Under each other on tablet / mobile #}
<div class="{{ component_class }}__something flex flex-col md:flex-row">

<div class="{{ component_class }}__column {{ component_class }}__column--1 md:w-4/12 text-left">
something 1
</div>

<div class="{{ component_class }}__column {{ component_class }}__column--2 md:w-4/12 text-left">
something 2
</div>

<div class="{{ component_class }}__column {{ component_class }}__column--3 md:w-4/12 text-left">
something 3
</div>

</div>